<template>
  <div>
    <el-dialog  :title="title1" :visible.sync="open" width="1000px"  append-to-body @close="cancel2">
      <baidu-map  v-loading="loadingMap"   :center="center" :zoom="zoom" @ready="handler"
                  :scroll-wheel-zoom="true"
                  @click="clickEvent"
      >
        <!--             :icon="{url:require('@/assets/image/zuobiao.png'), size: {width: 18, height: 18}}"-->
        <bm-marker :position="autoLocationPoint"
                   v-if="initLocation"
        >
        </bm-marker>
        <!-- 地图控件位置 -->
        <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT" ></bm-navigation>
        <!-- 获取城市列表 -->
        <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
        <!-- 定位当前位置 -->
        <!--        <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"  :showAddressBar="true" :autoLocation="true" @locationSuccess="getLoctionSuccess" ></bm-geolocation>-->
        <!-- 地图容器 -->
        <bm-view :style="{width:'100%',height: '300px'}"></bm-view>
      </baidu-map>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitSurvey">确 定</el-button>
        <el-button @click="cancel2">取 消</el-button>
      </div>
    </el-dialog>





  </div>
</template>
<script>
  export default {
    name: "selectMap",
    props: {
      open:Boolean,
      lat:String,
      lng:String,

    },
    data() {
      return {
        title1:"地图定位",
        // 表单参数
        form: {},
        //地图
        loadingMap:true,
        center: {lng:116.013461, lat: 28.692325},
        zoom: 19,
        mapVisible:false,
        initLocation:false,
        autoLocationPoint: {lng: 116.013461, lat: 28.692325},
        isNoe:0,
      }
    },
    created(){

    },
    methods: {
      // clickEvent() {
      //   this.$emit("listenClick","改变了");
      //   this.$emit("listenClick2",false);
      // },
      submitSurvey(){
        this.center={lng:0, lat: 0};
        this.initLocation=false;
        this.autoLocationPoint={lng: 0, lat: 0};
      },
      cancel2(){
        this.center={lng:0, lat: 0};
        this.initLocation=false;
        this.autoLocationPoint={lng: 0, lat: 0};
        this.$emit("listenClose",false);
      },


      //点击地图监听
      clickEvent(e){
        console.log("e------",e)
        map.clearOverlays();
        // let Icon_0 = new BMap.Icon(this.icon, new BMap.Size(64, 64), {anchor: new BMap.Size(18, 32),imageSize: new BMap.Size(36, 36)});
        var myMarker = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat));
        map.addOverlay(myMarker);
        this.zoom = map.getZoom();
        //用所定位的经纬度查找所在地省市街道等信息
        var point = new BMap.Point(e.point.lng, e.point.lat);
        var gc = new BMap.Geocoder();
        let _this = this;
        gc.getLocation(point, function (rs) {
          console.log(rs)
          var addComp = rs.addressComponents;
          console.log(rs.address);//地址信息
          _this.form.location = rs.address;
          _this.form.address = rs.address;
        });
        this.center = {lng: e.point.lng, lat:e.point.lat};		// 设置center属性值
        this.form.lng=e.point.lng;
        this.form.lat=e.point.lat;
        this.autoLocationPoint = {lng: e.point.lng, lat:e.point.lat};		// 自定义覆盖物
      },

      handler ({BMap, map}) {
        // 设置一个临时变量指向vue实例，因为在百度地图回调里使用this，指向的不是vue实例；
        let _this = this;
        console.log("Bmp,map",BMap,map);
        // var point = new BMap.Point(117.39, 115.25)
        // var point = new BMap.Point(_this.center.lng, _this.center.lat)
        // map.centerAndZoom(point, 13);

        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function(r){
          console.log(r);
          _this.center = {lng: r.point.lng, lat: r.point.lat};		// 设置center属性值
          _this.autoLocationPoint = {lng: r.point.lng, lat: r.point.lat};
          _this.initLocation = true;
          _this.loadingMap = false;
        },{enableHighAccuracy: true});
        window.map = map;
      },
      close1(){
        console.log("---")
      },

    }
  }
</script>

<style scoped>

</style>
